<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="js/zepto.min.js"></script>
  <script src="js/touch.js"></script>
  <title>购物车</title>
</head>

<style>
  * {
    margin: 0;
    padding: 0;
  }

  #list li {
    padding-left: 20px;
    border-bottom: 1px solid #000;
    height: 40px;
    line-height: 40px;
  }

  .del {
    padding: 0 20px;
    background-color: red;
    display: none;
    float: right;
  }
</style>

<body>
  <ul id='list'>
    <li>商品1 <span class='del'>删除</span></li>
    <li>商品2 <span class='del'>删除</span></li>
    <li>商品3 <span class='del'>删除</span></li>
    <li>商品4 <span class='del'>删除</span></li>
  </ul>
</body>
<script>
  //swipe 滑动事件
  //swipeLeft, swipeRight, swipeUp, swipeDown
  $("#list li").swipeLeft(function () {
    $('.del').hide()
    $(this).children().show()
  })
  $("#list li").swipeRight(function () {
    $('.del').hide()
  })
  $("#list li").tap(function () {
    window.location.href = 'http://baidu.com'
  })
  $("#list li").longTap(function () {
    alert("找相似")
  })
</script>
<!-- attr prop -->

</html>